.login_box {
  /* 使用固定定位让元素撑满全屏 */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.1);
  z-index: 10;
  display: none;
}
.login_nav {
  position: absolute;
  top: calc(50% - 245px);
  left: calc(50% - 351px);
  width: 702px;
  height: 490px;
  background-color: #fff;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
}
/* 查号 */
.login_cha{
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}
.login_nav .nav_tab {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgb(230, 229, 229);
}
.login_nav .nav_tab a {
  display: block;
  padding: 2px;
  margin: 0 60px;
  color: black;
}
.login_nav .nav_tab a:hover {
  color: #31c27c;
}
.login_nav a.active {
  display: block;
  color: #31c27c;
}
/* 隐藏内容 */
.nav_content .nav_login {
  display: none;
}
/* 显示内容 */
.nav_content .active{
  display: block;
}
/* 内容部分 */
.nav_content {
  width: 700px;
  height: 432px;
}
/* qq登录内容模块 */
/* qq登录 --- 用户名密码登录 */
.login_uname,
.login_erweima {
  display: block;
  float: left;
  width: 432px;
  height: 342px;
}
.login_erweima h1 {
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  margin: 16px 0 6px;
}
.login_uname h1,
.login_erweima h1 {
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  line-height: 28px;
  color: #000;
  margin: 16px 0 6px;
}
.login_uname p,
.login_erweima p {
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.login_uname p a,
.login_erweima p a {
  color: blue;
}
.login_uname .uname {
  display: block;
  width: 250px;
  height: 34px;
  outline: none;
  border: 1px solid rgb(194, 192, 192);
  border-radius: 5px;
  margin: 26px auto 0;
  text-indent: 1em;
}
.login_uname .uname::placeholder {
  color: rgb(194, 192, 192);
}

.login_uname .pwd {
  display: block;
  width: 250px;
  height: 34px;
  outline: none;
  border: 1px solid rgb(194, 192, 192);
  border-radius: 5px;
  margin: 12px auto 0;
  text-indent: 1em;
}
.login_uname .pwd::placeholder {
  color: rgb(194, 192, 192);
}

.login_uname span {
  display: block;
  width: 250px;
  height: 10px;
  color: #f00;
  font-size: 12px;
  margin: 4px auto 0;
}

.login_uname .qq_btn {
  display: block;
  width: 250px;
  height: 38px;
  font-size: 14px;
  color: #fff;
  outline: none;
  border-radius: 6px;
  border: none;
  margin: 14px auto 0;
  background-color: rgb(69, 176, 238);
  cursor: pointer;
}
.login_erweima img {
  display: block;
  width: 85px;
  margin: 32px auto 0;
}
.login_uname .footbtn,
.login_erweima .footbtn {
  display: flex;
  width: 250px;
  font-size: 12px;
  justify-content: space-between;
}
.login_uname .footbtn{
  margin: 26px auto 0;
}
.login_erweima .footbtn{
  margin: 99px auto 0;
}
.login_uname .footbtn a,
.login_erweima .footbtn a {
  color: #000;
}

/* 右侧部分 */
.login_agree {
  float: left;
  width: 228px;
  height: 182px;
  margin-top: 28px;
  padding-top: 76px;
  padding-left: 30px;
  border-left: 1px solid rgb(238, 237, 237);
}
.login_agree p {
  font-size: 12px;
  color: #555;
  line-height: 18px;
}
.login_agree p a {
  color: blue;
}
.login_agree ul li {
  line-height: 20px;
  margin: 4px auto;
}
.login_agree ul li input[type = "checkbox"] {
  display: none;
}
.login_agree ul li label {
  cursor: pointer;
  font-size: 12px;
  color: #666;
}
.login_agree ul li label img{
  width: 16px;
  height: 16px;
  vertical-align: middle;
}






/* 微信登录内容模块 */
.wx_img {
  width: 160px;
  height: 160px;
  margin: 64px auto 28px auto;
  border: 1px solid rgb(216, 214, 214);
}
.wx_img img {
  width: 100%;
}
.wx_title {
  width: 280px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  margin: 0 auto;
  border-radius: 14px;
  background-color: #f7f7f7;
}
.wx_title2 {
  width: 100%;
  height: 28px;
  text-align: center;
  line-height: 28px;
  margin-top: 12px;
  color: #999;
  font-size: 12px;
}
/* 下载客户端按钮/ */
.nav_content>a {
  position: absolute;
  bottom: 10%;
  left: calc(50% - 120px);
  display: block;
  width: 240px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  border-radius: 20px;
  background-color: #31c27c;
  background-image: linear-gradient(90deg,#24ccaa,#31c27c);
  transition: all .55s;
}
.nav_content>a:hover {
  color: #fff;
  background-color: #31c27c;
  background-image: none;
}
